<template>
    <div class="body_bgi box_1 full bgs_full relative" ref="home_box">
      <!-- header -->
      <big-screen-header :headerName="`${farmName}` + '简介'" />

      <!-- body -->
      <div class="w_full-60 h_full-130 m_0_auto flex_row_around">
        <!-- 1 -->
        <div class="w_50_p h_full chart_box_bgi_1 p_10">
          <div class="w_full flex_row_start">
            <div class="w_200 h_150 p_10" v-show="false">
              <!-- 牧户头像 -->
              <img 
                class="full border_radius_10 cursor response_img" 
                v-if="farmDefail.avatar"
                :src='farmDefail.avatar' alt=""
              >
              <!-- 默认头像 -->
              <img 
                class="w_full object_fit_cover border_radius_10 cursor" 
                v-else
                :src='def_user_img' alt=""
              >
            </div>

            <div class="w_full-200 h_150 p_10">
              <div class="fs_20 main_color">{{ farmDefail.name }}</div>
              <div class="fs_20 main_color">管理员：{{ farmDefail.nickName || '管理员名称' }}</div>
              <div class="fs_20 main_color">所在地：{{ farmDefail.townName || '' + '/' + farmDefail.villageName || '' }}</div>
            </div>
          </div>

          <div class="w_full h_full-150 overflow_y_auto scroll_box color_fff pl_10" v-html="farmDefail.introduction" @click="showImg($event)"></div>
        </div>

        <!-- 2 -->
        <div class="w_45_p h_full ph_10 border_box flex_column_between relative">
          <div class="w_full main_color text_center fw_bold ls_2">交易羊分布信息</div>
          <Xbehyq-map class="full" :seriesData="seriesData" />
        </div>
      </div>

      <el-dialog
        title=""
        :visible.sync="imgPreview.show"
        width="50%">
        <img class="w_full h_5001 response_img" :src="imgPreview.img" alt="">
      </el-dialog>
    </div>
</template>

<script>
  import defMixin from '@/mixins/def';
  import defImgMixin from '@/mixins/def-img';
  import componentsMixin from '@/mixins/components';

  import {
    getFarmInfo,
    getTownCattleCount,
    getSellPage,
  } from '@/api/sheep/index.js';

  import { filePath } from "@/const"

  export default {
    name: 'ZhongYangChangDetail',

    mixins: [defMixin, defImgMixin, componentsMixin],
    data() {
      return {
        filePath: filePath,

        farmId: null,
        farmName: '',

        farmDefail: {},
        seriesData: [],

        imgPreview: {
          img: '',
          show: false
        }
      }
    },
    computed: {

    },
    created() {
      
    },
    async mounted () {
      let farmId = this.$route.params.farmId
      let farmName = this.$route.params.farmName

      this.farmId = farmId
      this.farmName = farmName

      // 获取 种羊场 简介
      await this.getFarmInfo(farmId)

      // 获取 从 xxx 种羊场 出栏的 种公羊分布情况
      await this.getTownCattleCount(farmId)
    },
    destroyed() {

    },
    methods: {
      // 获取 种羊场 简介
      async getFarmInfo(farmId) {
        let res = await getFarmInfo(farmId)
        try {
          if (res.code == 1000) {
            this.farmDefail = res.data
          }
        } catch(err) {
          console.log('获取获取 种羊场 简介失败 : ', err)
        }
      },

      // 获取 全旗 存栏统计
      async getTownCattleCount(farmId) {
        let countyId = 150626000000
        let res = await getTownCattleCount(countyId, farmId)
        try {
          if (res.code == 200) {
            for (let i in res.data) {
              this.seriesData.push({name: res.data[i].townName, value: res.data[i].totalCount})
            }
          }
        } catch(err) {
          console.log('获取种公羊出栏统计失败 : ', err)
        }
      },
      
      // 交易 列表
      async getSellPage(params) {
        this.pointList = []
        this.isLoading = true
        let res = await getSellPage(params)
        try {
          if (res.code == 200) {
            this.sellList = res.data
            this.isLoading = false

            let list = []
            for (let i in res.data) {
              if (res.data[i].longitude && res.data[i].latitude) {
                list.push({ 
                  index: i + 1,
                  muhuId: res.data[i].muhuId,
                  nickName: res.data[i].nickName,
                  townId: res.data[i].townId,
                  townName: res.data[i].townName,
                  villageId: res.data[i].villageId,
                  villageName: res.data[i].villageName,
                  point: { lng: res.data[i].longitude, lat: res.data[i].latitude }
                })
              }
            }

            this.pointList = list
          }
        } catch(err) {
          console.log('获取交易列表失败 : ', err)
        }
      },

      // 出栏 列表
      async getVillageTotal(farmId) {
        this.pointList = []

        let res = await getVillageTotal(farmId)
        try {
          if (res.code == 200) {
            let list = []
            for (let i in res.data) {
              if (res.data[i].longitude && res.data[i].latitude) {
                list.push({ 
                  muhuId: res.data[i].muhuId,
                  townName: res.data[i].townName,
                  villageId: res.data[i].villageName,
                  villageName: res.data[i].villageName,
                  nickName: res.data[i].nickName,
                  point: { lng: res.data[i].longitude, lat: res.data[i].latitude }
                })
              }
            }

            this.pointList = list
          }
        } catch(err) {
          console.log('获取出栏列表失败 : ', err)
        }
      },

      // 点击 富文本 中的图片
      showImg(e) {
        if (e.target.tagName == 'IMG') {
          this.imgPreview.img = e.target.src
          this.imgPreview.show = true
        }
      },

      // 跳转页面 
      goToPage(val) {
        this.$router.push({
          path: val
        })
      },

    }
  }
</script>

<style lang="less">
  .s { color: #ed5195; }
</style>
